<style lang="less" scoped="scoped">
    .div-basic{
        padding-left: 20px;
        width: 82%;
        margin: auto;
    }
    .div-span-class{
        margin: 10px 30px;
        font-weight:normal;
        font-size: 12px;
        float: left;
    }
</style>
<template>
    <div class="detail-card">
        <div class="apply-header">
            <ul class="over">
                <li class="over fsbig mb10">
                    <h2 class="fl">{{orderInfo.custName}} {{orderInfo.applyNo}}</h2>
                    <b class="fr status">{{contractStatus}}</b>
                </li>
                <li class="fsmedium">
                    <p class="mb10">
<!--                        <span>合作商:{{orderInfo.channelName}} </span>-->
<!--                        <i class="icon">|</i>-->
                        <span>{{businessTypeStr}}&nbsp;</span>
<!--                        <i class="icon">|</i>-->
                        <span>{{carTypeStr}}&nbsp;</span>
<!--                        <i class="icon">|</i>-->
                        <span>{{carNatureStr}}</span>
                        <i class="icon">&nbsp;&nbsp;|&nbsp;&nbsp;</i>
                        <span>贷款金额:&nbsp;&nbsp;{{orderInfo.money}}元</span>
                        <i class="icon">&nbsp;&nbsp;|&nbsp;&nbsp;</i>
                        <span>贷款期限:&nbsp;&nbsp;{{orderInfo.term}}</span>
                    </p>
                </li>
                <li class="over fssmall">
                    <span class="fl">
                        <span>核准时间:&nbsp;&nbsp;{{orderInfo.riskPassDate}}</span>
                        <i class="icon" v-show="typeof orderInfo.firstCommitTime!=='undefined'">|</i>
                        <span v-show="typeof orderInfo.firstCommitTime!=='undefined'">放款提交时间:&nbsp;&nbsp;{{orderInfo.firstCommitTime}}</span>
                        <i class="icon" v-show="typeof orderInfo.startTime!=='undefined'">|</i>
                        <span v-show="typeof orderInfo.startTime!=='undefined'">合同激活时间:&nbsp;&nbsp;{{orderInfo.startTime}}</span>
                    </span>
                    <span class="fr">操作人 {{orderInfo.createBy}}</span>
                </li>
            </ul>
        </div>
<!--        <h2>合同基本信息</h2>-->
<!--        <ul class="over">-->
<!--            <table style="width: 96%;text-align: left">-->
<!--                <tr>-->
<!--                    <td style="width: 24%;">申请编号:&nbsp;&nbsp;{{this.orderInfo.applyNo}}</td>-->
<!--                    <td style="width: 24%;">客户姓名:&nbsp;&nbsp;{{this.orderInfo.custName}}</td>-->
<!--                    <td style="width: 24%;">合作商:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.orderInfo.channelName}}</td>-->
<!--                    <td style="width: 24%;">业务类型:&nbsp;&nbsp;{{businessTypeStr}}</td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <td style="width: 24%;">车辆类型:&nbsp;&nbsp;{{carTypeStr}}</td>-->
<!--                    <td style="width: 24%;">车辆属性:&nbsp;&nbsp;{{carNatureStr}}</td>-->
<!--                    <td style="width: 24%;">挂靠方式:&nbsp;&nbsp;{{affiliatedWayStr}}</td>-->
<!--                    <td style="width: 24%;">购车目的:&nbsp;&nbsp;{{carPurposeStr}}</td>-->
<!--                </tr>-->
<!--            </table>-->
<!--            <li class="div-span-class">申请编号:&nbsp;&nbsp;{{this.orderInfo.applyNo}}</li>-->
<!--            <li class="div-span-class">客户姓名:&nbsp;&nbsp;{{this.orderInfo.custName}}</li>-->
<!--            <li class="div-span-class">&nbsp;合作商:&nbsp;&nbsp;{{this.orderInfo.channelName}}</li>-->
<!--            <li class="div-span-class">业务类型:&nbsp;&nbsp;{{businessTypeStr}}</li>-->
<!--            <br>-->
<!--            <li class="div-span-class">车辆类型:&nbsp;&nbsp;{{carTypeStr}}</li>-->
<!--            <li class="div-span-class">车辆属性:&nbsp;&nbsp;{{carNatureStr}}</li>-->
<!--&lt;!&ndash;            <li class="div-span-class">运营方式:&nbsp;&nbsp;{{operateWayStr}}</li>&ndash;&gt;-->
<!--            <li class="div-span-class">挂靠方式:&nbsp;&nbsp;{{affiliatedWayStr}}</li>-->
<!--            <li class="div-span-class">购车目的:&nbsp;&nbsp;{{carPurposeStr}}</li>-->
<!--        </ul>-->
        <!-- <div v-if="isNeedApproval">
            <h2>审批进度</h2>
            <Timeline pending class="div-span-class">
                <TimelineItem v-for="item in this.recordDetails ">
                    {{item.applyLink}} &nbsp;&nbsp; {{item.createTime}} &nbsp;&nbsp; {{item.applyResult}}
                </TimelineItem>
            </Timeline>
        </div> -->
    </div>
</template>
<script>
    import {getByTypes} from "_p/basic/api/admin/datadic";
    import {deepClone} from '@/libs/utils/ObjectClone';

    export default {
        props: {
            orderInfo: {
                type: Object
            },
            recordDetails:{
                type: Array
            },
            isNeedApproval:{
                type: Boolean
            }
        },
        computed:{
            carNatureStr(){
                for(let i=0; i<this.dataDic.carNature.length;i++){
                    if(this.dataDic.carNature[i].value === this.orderInfo.carNature){
                        return this.dataDic.carNature[i].title;
                    }
                }
                return "";
            },
            carTypeStr(){
                for(let i=0; i<this.dataDic.carType.length;i++){
                    if(this.dataDic.carType[i].value === this.orderInfo.carType){
                        return this.dataDic.carType[i].title;
                    }
                }
                return "";
            },
            businessTypeStr(){
                for(let i=0; i<this.dataDic.businessType.length;i++){
                    if(this.dataDic.businessType[i].value === this.orderInfo.businessType){
                        return this.dataDic.businessType[i].title;
                    }
                }
                return "";
            },
            operateWayStr(){
                for(let i=0; i<this.dataDic.operateWay.length;i++){
                    if(this.dataDic.operateWay[i].value === this.orderInfo.operateWay){
                        return this.dataDic.operateWay[i].title;
                    }
                }
                return "";
            },
            affiliatedWayStr(){
                for(let i=0; i<this.dataDic.affiliatedWay.length;i++){
                    if(this.dataDic.affiliatedWay[i].value === this.orderInfo.affiliatedWay){
                        return this.dataDic.affiliatedWay[i].title;
                    }
                }
                return "";
            },
            carPurposeStr(){
                for(let i=0; i<this.dataDic.carPurpose.length;i++){
                    if(this.dataDic.carPurpose[i].value === this.orderInfo.carPurpose){
                        return this.dataDic.carPurpose[i].title;
                    }
                }
                return "";
            },
            contractStatus(){
                for(let i=0; i<this.dataDic.contractStatus.length;i++){
                    if(this.dataDic.contractStatus[i].value === this.orderInfo.viewContractStatus){
                        return this.dataDic.contractStatus[i].title;
                    }
                }
                return "";
            },
        },

        data () {
            return {
                dataDic:{
                    businessType: [],
                    operateWay: [],
                    affiliatedWay: [],
                    carPurpose: [],
                    carType: [],
                    carNature: [],
                    contractStatus:[]
                },
                money:0,
                term:'',
            }
        },
        mounted () {
            this.initDataDic();
        },
        methods: {
            initDataDic(){
                //数据字典
                let arr = ["operateWay", "gpsSupplier", "affiliatedWay", "carPurpose", "businessType", "carType", "carNature","contractStatus"];
                getByTypes(arr).then(res => {
                    if (res.code === "0000") {
                        this.dataDic = deepClone(res.data);
                    }
                });
            },
        }
    }
</script>
<style scoped>
.apply-header{
    background-color: #FFFFFF;
}
.apply-header .fsbig{
    font-size: 14px;
    color: #333;
}
.apply-header .fsbig h2{
    font-weight: normal;
    font-size: 14px;
}
.apply-header .fsbig b.status{
    font-weight: normal;
    position: relative;
}
.apply-header .fsbig b.status::before{
    content: "";
    width: 8px;
    height: 8px;
    background: #6FC312;
    position: absolute;
    border-radius: 50%;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}
.apply-header .fsmedium{
    font-size: 12px;
    color:#666666;
}
.apply-header .fssmall{
    font-size: 12px;
    color:#666;
}
.apply-header .fssmall i{
    font-style: normal;
}
.icon {
    color: #d8d8d8;
}
</style>
